<template>
  <div class="wrap">
    <el-tree
      :data="data1"
      :default-expanded-keys="['1']"
      show-checkbox
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
    >
      <template slot-scope="{ node }">
        <div style="font-size:12px;">
          <span class="overflow-x: auto"> {{ node.label }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data1: [
        {
          id: "1",
          label: "楼层选择",
          children: [
            {
              id: "2",
              label: "1F",
              children: [
                {
                  id: "2-1",
                  label: "空调设备",
                },
                {
                  id: "2-2",
                  label: "人脸识别设备",
                },
                {
                  id: "2-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "3",
              label: "2F",
              children: [
                {
                  id: "3-1",
                  label: "空调设备",
                },
                {
                  id: "3-2",
                  label: "人脸识别设备",
                },
                {
                  id: "3-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "4",
              label: "3F",
              children: [
                {
                  id: "4-1",
                  label: "空调设备",
                },
                {
                  id: "4-2",
                  label: "人脸识别设备",
                },
                {
                  id: "4-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "5",
              label: "4F",
              children: [
                {
                  id: "5-1",
                  label: "空调设备",
                },
                {
                  id: "5-2",
                  label: "人脸识别设备",
                },
                {
                  id: "5-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "6",
              label: "5F",
              children: [
                {
                  id: "6-1",
                  label: "空调设备",
                },
                {
                  id: "6-2",
                  label: "人脸识别设备",
                },
                {
                  id: "6-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "7",
              label: "6F",
              children: [
                {
                  id: "7-1",
                  label: "空调设备",
                },
                {
                  id: "7-2",
                  label: "人脸识别设备",
                },
                {
                  id: "7-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "8",
              label: "7F",
              children: [
                {
                  id: "8-1",
                  label: "空调设备",
                },
                {
                  id: "8-2",
                  label: "人脸识别设备",
                },
                {
                  id: "8-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "9",
              label: "8F",
              children: [
                {
                  id: "9-1",
                  label: "空调设备",
                },
                {
                  id: "9-2",
                  label: "人脸识别设备",
                },
                {
                  id: "9-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "10",
              label: "9F",
              children: [
                {
                  id: "10-1",
                  label: "空调设备",
                },
                {
                  id: "10-2",
                  label: "人脸识别设备",
                },
                {
                  id: "10-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "11",
              label: "10F",
              children: [
                {
                  id: "11-1",
                  label: "空调设备",
                },
                {
                  id: "11-2",
                  label: "人脸识别设备",
                },
                {
                  id: "11-3",
                  label: "视频监控",
                },
              ],
            },
            {
              id: "12",
              label: "11F",
              children: [
                {
                  id: "12-1",
                  label: "空调设备",
                },
                {
                  id: "12-2",
                  label: "人脸识别设备",
                },
                {
                  id: "12-3",
                  label: "视频监控",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
  .el-tree {
    color: #ffffffc4;
  }
}

.el-tree-node {
  white-space: normal;
  font-size: 12px;
  font-family: "OPPO";
  font-weight: normal;
  color: #ffffff;
  margin-top: 5px;
  line-height: 18px;
  .el-tree-node__content {
    height: 100%;
    align-items: start;
  }
}

.is-focusable {
  background: #000;
}

.el-tree-node__content > .el-tree-node__expand-icon {
  line-height: 0;
}
.el-tree-node__content {
  height: 33px;
}
.el-tree-node:focus > .el-tree-node__content {
  background-color: transparent !important;
}
.expanded,
.el-tree-node__expand-icon,
.el-icon-caret-right {
  line-height: 0;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: transparent;
}
.el-tree-node__content {
  align-items: flex-start;
}
.el-tree-node__content:hover {
  background: transparent;
}
.el-tree {
  background: transparent;
}
.mianban {
  width: 280px;
  height: 884px;
  /* background: url('../../../assets/img/设备运维管控_slices/矩形.png') no-repeat center; */
  background-size: 100% 100%;
  position: absolute;
  right: 536px;
  top: 0;
  opacity: 0;
  transition: all 2s;
  overflow: scroll;
  .btn {
    width: 156px;
    height: 25px;
    display: flex;
    padding: 18px 63px 18px 63px;
    .current {
      width: 78px;
      height: 25px;
      background: rgba(30, 72, 108, 0.9);
      border-radius: 1px;
      border: 1px solid #6792a6;
      padding: 3px 11px 5px 11px;
      box-sizing: border-box;
      font-size: 12px;
      font-family: "OPPO";
      font-weight: normal;
      color: #ffffff;
      line-height: 16px;
      letter-spacing: 1px;
      &.active {
        background: linear-gradient(
          270deg,
          rgba(49, 196, 255, 0.59) 0%,
          rgba(199, 238, 255, 0.35) 100%
        );
        border-radius: 1px;
        opacity: 0.96;
      }
    }
  }
  // .box{
  //     width: 120px;
  //     height: 16px;
  //     border: 1px solid red;
  // }
}
</style>
